<template>
    <div class="box">
        <headers title="我的"></headers>
        <div class="top">
            <van-icon name="friends-o" @click="showPopup" />
            <img src="../../../assets/bg6.png" alt="" srcset="">
            <p>我的昵称:河北唐山梁家翔</p>
        </div>
        <!-- 左侧弹出 -->
        <van-popup v-model:show="show" position="left" closeable :style="{ width: '30%', height: '100%' }">
            <div style="height: 4rem;"></div>
            <van-cell-group>
                <van-cell title="全部订单" is-link to="/login" />
                <van-cell title="修改密码" is-link to="/login" />
                <van-cell title="个人中心" is-link to="/login" />
                <van-cell title="全部地址" is-link to="/login" />
                <van-cell title="个人信息" is-link to="/login" />
            </van-cell-group>
        </van-popup>
        <van-cell-group>
            <van-cell title="全部订单" is-link to="/login" />
        </van-cell-group>

        <van-grid :column-num="3">
            <van-grid-item icon="photo-o" text="待支付" />
            <van-grid-item icon="photo-o" text="待收货" />
            <van-grid-item icon="photo-o" text="待评价" />
        </van-grid>
        <van-cell-group>
            <van-cell title="修改密码" is-link to="/login" />
            <van-cell title="个人中心" is-link to="/login" />
            <van-cell title="全部地址" is-link to="/login" />
            <van-cell title="个人信息" is-link to="/login" />
        </van-cell-group>
    </div>
</template>

<script setup>
import headers from '@/components/headers.vue';

//弹出框
import { ref } from 'vue'
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 15rem;
    display: flex;
    align-items: center;
    background: skyblue;

    img {
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        margin: 0 0.5rem;
    }
}
</style>